<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>

</head>
<body>
<div class="nav">
    <img src="pic/star.jpg" alt="">
    <span class="blog-title">我的日记系统</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写日记</a>
    <a class="nav-span" href="#"onclick="logout()">注销</a>
</div>
<div class="container">
    <div class="left">
        <div class="card">
            <img src="pic/star.jpg" alt="">
            <h3></h3>
            <a href="#">Gitee地址</a>
            <div class="row">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="row">
                <span>2</span>
                <span>1</span>
            </div>
        </div>
    </div>
    <div class="right">
    </div>
</div>
<div class="demo">
    <ul id="pageContainer" class="pagination justify-content-center"></ul>
</div>

<script>
<!--,前端需要告诉翻页的内容    1.currentPage当前页   2.pageSize每页显示的内容,为了后续后端可以不去修改,offset=(currentPage-1)*pageSize-->
    getBlogList();
    function getBlogList(){
        $.ajax({
            type:"get",
            url:"/blog/getBlogList"+location.search,
            success:function (result){
                //针对的是HTTP而不是我们的业务码
                if(result.code==200&&result.data!=null){
                    //后端的返回值result
                    var blogList=result.data.records;
                    var finalHtml="";
                    //这里是进行拼接，.right是那个css格式
                    //这个用法无需上面的标签保存
                    for(var blog of blogList){
                        //单引号方便复制粘贴，那个双引号用于css那个标签比较好
                        finalHtml+='<div class="blog">';
                        finalHtml+='<div class="title">'+blog.title+'</div>';
                        finalHtml+='<div class="date">'+blog.createTime+'</div>'
                        finalHtml+='<div class="desc">'+blog.content+'</div>'
                        //这里加上这个id，是为了我们去使用他
                        finalHtml += '<a class="detail" href="blog_detail.html?blogId='+blog.id+'">查看全文&gt;&gt;</a>';
                        finalHtml+='</div>';
                    }
                    $(".right").html(finalHtml);
                    //翻页信息
                    $("#pageContainer").jqPaginator({
                    totalCounts:  result.data.total, //总记录数
                    pageSize: 3,    //每页的个数
                    visiblePages: 3, //可视页数
                    currentPage:  result.data.pageRequest.currentPage,  //当前页码
                    first: '<li class="page-item"><a class="page-link">首页</a></li>',
                    prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
                    next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
                    last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
                    page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
                    //页面初始化和页码点击时都会执行
                    onPageChange: function (page, type) {
                        console.log("第" + page + "页, 类型:" + type);
                        if(type=="change") {
                            //，假如点击第二页了，那么跳转到第二页的页面
                            location.href = "blog_list.html?currentPage=" + page;
                        }
                    }
                 });
                 }
             },
            error:function (error){
                //用户未登录
                if(error!=null&&error.status==401){
                    alert("用户未登录");
                    location.href="blog_login.html";
                }
            }
        });
    }
    //ajax的统一方法，他需要一个header来满足后端这个 String token=request.getHeader("user_token");
    //发送ajax时候，就会执行这个函数
    //获取用户信息
    getUserInfo("/user/getUserInfo");
</script>
</body>
</html>